<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: center;
        }
        .container{
            /* 页面可视的宽 */
            width: 100vw;
            /* 页面可视的高 */
            height: 100vh;
            background-color: royalblue;
        }
        a {
            text-decoration: none;
        }
        header{
            /* height: 30px; */
            height: 10%;
            background-color: pink;
        }
        nav{
            /* height: 30px; */
            height: 10%;
            background-color: lightgreen;
        }
        section{
            height: 70%;
            overflow: hidden;
        }
        aside{
            width: 30%;
            height: 100%;
            /* height: 300px; */
            background-color: lightskyblue;
        }
        article{
            width: 70%;
            height: 100%;
            /* height: 300px; */
            background-color: lightyellow;
        }
        aside,article{
            float: left;
        }
        footer{
            /* height: 30px; */
            height: 10%;
            background-color: pink;
        }
    </style>
</head>

<body>
    <!-- <header>111</header>
    <nav></nav>
    <section>
        <aside>

        </aside>
        <article>

        </article>
    </section>
    <footer>111</footer> -->

    <div class="container">
        <header>头部</header>
        <nav>导航</nav>
        <section>
            <aside>侧边栏</aside>
            <article>正文</article>
        </section>
        <footer>底部</footer>
    </div>

</body>

</html>